<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title>拖拽改变div大小</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #mydiv{
            width:200px;
            height:150px;
            position:absolute;
            border:1px solid red;
        }
        img{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div id="mydiv">
    <img src="han1.jpg" alt=""/>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        var mydiv=document.getElementById('mydiv');
        mydiv.onmousedown=function(e){
            var ev=e||window.event;
            var divW=mydiv.offsetWidth;
            var divH=mydiv.offsetHeight;
            var disX=ev.clientX;
            var disY=ev.clientY;
            document.onmousemove=function(e){
                var ev=e||window.event;
                mydiv.style.width=ev.clientX-disX+divW+'px';
                mydiv.style.height=ev.clientY-disY+divH+'px';
            };
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            };
            return false;
        }
    });
</script>
</html>